<template>
  <div class="app-container">
    <!-- 头部 -->
    <Find :OriginalFilter="{ static: true }" @Launchform="Launchform9" :formList="formList" @findClicked="findData" @clickNumber1="clickNumber" />

    <el-card style="margin-top: 15px" :body-style="{ padding: '5px' }">
      <div style="display: flex">
        <div style="width: 99%">
          <span style="font-weight: 600">补单资料信息</span>
          <span style="font-weight: 600; color: red"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ps:修改日期需要的格式:例如2023-05-02/双位数日期例如:2023-11-12</span
          >
          <Table
            :isLoading="isLoading"
            @inputChange="checkboxChange1"
            @currentRow="currentRowListOeder"
            @checkboxChange="checkboxChange"
            :tableHeader="tableHeader"
            :tableData="ReplenishmentInformationInquiryTableDate"
            :TableHeight="100"
          />
          <PageModule
            :PageData="{ total, buttonS: true, pageSizeShow: true }"
            @pageSizeChange="handleSizeChange5"
            @pageChange="handleCurrentChange5"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import LoginWork from '@/utils/LoginWork'
import fileRequest from '@/utils/fileRequest'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ReplenishmentTracking'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { GainDeptNmae } from '@/api/WarehouseDepartment/FactoryStorage/ConsumablesIn'
import { ReplenishmentInformationInquiry, DeleteReplenishment } from '@/api/Control/FactoryControl/ReplenishmentTracking'
const isLoading = ref(true)

// 删除
const slipNoList = ref('')

const currentRowListOeder = (row: any) => {
  slipNoList.value = row.slipNo
  lotNoList.value = row.lotNo
}

const lotNoList = ref('')

const DeleteReplenishmentMethods = async () => {
  const result = await DeleteReplenishment(slipNoList.value, lotNoList.value)
  if (result.code === 200) {
    ReplenishmentInformationInquiryMethods()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

const handleCloseMateriaLKlc5 = () => {
  if (slipNoList.value === '') {
    JMessage.warning('请选择需要删除的数据')
  } else {
    ElMessageBox.confirm('确认要删除数据吗?')
      .then(async () => {
        DeleteReplenishmentMethods()
      })
      .catch(() => {})
  }
}

// 日期
const formatCurrentDate = (date: any) => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

const currentDate = ref(new Date())

const checkboxChange1 = async (list: any) => {
  confirmChangeParms.value.finishDate1 = list.finishDate1
  confirmChangeParms.value.finishDate2 = list.finishDate2
  confirmChangeParms.value.finishDate3 = list.finishDate3
  confirmChangeParms.value.finishDate4 = list.finishDate4
  confirmChangeParms.value.finishDate5 = list.finishDate5
  confirmChangeParms.value.finishDate6 = list.finishDate6
  confirmChangeParms.value.finishDate7 = list.finishDate7
  confirmChangeParms.value.finishDate = list.finishDate
  confirmChangeParms.value.lotNo = list.lotNo
  confirmChangeParms.value.slipNo = list.slipNo
  confirmChangeParms.value.type1NeedFlag = list.type1NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type2NeedFlag = list.type2NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type3NeedFlag = list.type3NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type4NeedFlag = list.type4NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type5NeedFlag = list.type5NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type6NeedFlag = list.type6NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type7NeedFlag = list.type7NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.typeNeedFlag = list.typeNeedFlag === true ? 'Y' : 'N'

  const re = /^(\d{4})-(\d{2})-(\d{2})$/
  let active = true

  // 遍历每个属性，检查日期格式
  Object.keys(confirmChangeParms.value).forEach((key: string) => {
    if (
      key !== 'lotNo' &&
      key !== 'slipNo' &&
      key !== 'type1NeedFlag' &&
      key !== 'type2NeedFlag' &&
      key !== 'type3NeedFlag' &&
      key !== 'type4NeedFlag' &&
      key !== 'type5NeedFlag' &&
      key !== 'type6NeedFlag' &&
      key !== 'type7NeedFlag' &&
      key !== 'typeNeedFlag'
    ) {
      const dateValue = confirmChangeParms.value[key]
      if (dateValue !== null && !re.test(dateValue) && dateValue !== '') {
        console.log(dateValue)
        active = false
      }
    }
  })

  if (!active) {
    JMessage.warning('日期格式错误应该为: xxxx-xx-xx')
  } else {
    const result = await LoginWork.put<any, any>('/bioDeptWrok/supTraceUpdate', confirmChangeParms.value)
    if (result.code === 200) {
      ReplenishmentInformationInquiryMethods()
      JMessage.success(result.message)
    } else {
      JMessage.error(result.message)
    }
  }
}

const checkboxChange = async (row: any, list: any) => {
  if (list.type1NeedFlag === true) {
    list.finishDate1 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate1 = ''
  }
  if (list.type2NeedFlag === true) {
    list.finishDate2 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate2 = ''
  }
  if (list.type3NeedFlag === true) {
    list.finishDate3 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate3 = ''
  }
  if (list.type4NeedFlag === true) {
    list.finishDate4 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate4 = ''
  }
  if (list.type5NeedFlag === true) {
    list.finishDate5 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate5 = ''
  }
  if (list.type6NeedFlag === true) {
    list.finishDate6 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate6 = ''
  }
  if (list.type7NeedFlag === true) {
    list.finishDate7 = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate7 = ''
  }
  if (list.typeNeedFlag === true) {
    list.finishDate = formatCurrentDate(currentDate.value)
  } else {
    list.finishDate = ''
  }
  confirmChangeParms.value.finishDate1 = list.finishDate1
  confirmChangeParms.value.finishDate2 = list.finishDate2
  confirmChangeParms.value.finishDate3 = list.finishDate3
  confirmChangeParms.value.finishDate4 = list.finishDate4
  confirmChangeParms.value.finishDate5 = list.finishDate5
  confirmChangeParms.value.finishDate6 = list.finishDate6
  confirmChangeParms.value.finishDate7 = list.finishDate7
  confirmChangeParms.value.finishDate = list.finishDate
  confirmChangeParms.value.lotNo = list.lotNo
  confirmChangeParms.value.slipNo = list.slipNo
  confirmChangeParms.value.type1NeedFlag = list.type1NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type2NeedFlag = list.type2NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type3NeedFlag = list.type3NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type4NeedFlag = list.type4NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type5NeedFlag = list.type5NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type6NeedFlag = list.type6NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.type7NeedFlag = list.type7NeedFlag === true ? 'Y' : 'N'
  confirmChangeParms.value.typeNeedFlag = list.typeNeedFlag === true ? 'Y' : 'N'

  const result = await LoginWork.put<any, any>('/bioDeptWrok/supTraceUpdate', confirmChangeParms.value)
  if (result.code === 200) {
    ReplenishmentInformationInquiryMethods()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

const confirmChangeParms = ref<any>({
  finishDate: '',
  finishDate1: '',
  finishDate2: '',
  finishDate3: '',
  finishDate4: '',
  finishDate5: '',
  finishDate6: '',
  finishDate7: '',
  lotNo: '',
  slipNo: '',
  type1NeedFlag: '',
  type2NeedFlag: '',
  type3NeedFlag: '',
  type4NeedFlag: '',
  type5NeedFlag: '',
  type6NeedFlag: '',
  type7NeedFlag: '',
  typeNeedFlag: ''
})

// 查询
const Launchform9 = (row: any) => {
  ReplenishmentInformationInquiryParms.value.slipNo = row[0].inputValue
  ReplenishmentInformationInquiryParms.value.lotNo = row[1].inputValue
  ReplenishmentInformationInquiryParms.value.style = row[2].inputValue
  ReplenishmentInformationInquiryParms.value.custom = row[3].inputValue
  ReplenishmentInformationInquiryParms.value.dutyDeptName = row[4].selectValue

  ReplenishmentInformationInquiryParms.value.blFlag = row[5].selectValue

  ReplenishmentInformationInquiryParms.value.slipDateStart = row[6].dateValue[0]
  ReplenishmentInformationInquiryParms.value.slipDateEnd = row[6].dateValue[1]
  ReplenishmentInformationInquiryParms.value.finishDateStart = row[7].dateValue[0]
  ReplenishmentInformationInquiryParms.value.finishDateEnd = row[7].dateValue[1]
  ReplenishmentInformationInquiryMethods()
}

const clickNumber = (num: number) => {
  ReplenishmentInformationInquiryParms.value.type = Number(num)
  ReplenishmentInformationInquiryMethods()
}

// 补单资料信息
const ReplenishmentInformationInquiryParms = ref({
  blFlag: '',
  custom: '',
  dutyDeptName: '',
  finishDateEnd: '',
  finishDateStart: '',
  lotNo: '',
  pageNum: 1,
  pageSize: 40,
  slipDateEnd: '',
  slipDateStart: '',
  slipNo: '',
  style: '',
  type: 0
})

const ReplenishmentInformationInquiryTableDate = ref([])

const ReplenishmentInformationInquiryMethods = async () => {
  isLoading.value = true
  const result = await ReplenishmentInformationInquiry(ReplenishmentInformationInquiryParms.value)
  ReplenishmentInformationInquiryTableDate.value = result.dtos.map((item: any) => {
    if (item.type1NeedFlag === 'Y') {
      item.type1NeedFlag = true
    }

    if (item.type2NeedFlag === 'Y') {
      item.type2NeedFlag = true
    }

    if (item.type3NeedFlag === 'Y') {
      item.type3NeedFlag = true
    }

    if (item.type4NeedFlag === 'Y') {
      item.type4NeedFlag = true
    }

    if (item.type5NeedFlag === 'Y') {
      item.type5NeedFlag = true
    }

    if (item.type6NeedFlag === 'Y') {
      item.type6NeedFlag = true
    }

    if (item.type7NeedFlag === 'Y') {
      item.type7NeedFlag = true
    }

    if (item.typeNeedFlag === 'Y') {
      item.typeNeedFlag = true
    }

    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
  total.value = result.total
  isLoading.value = false
}

const total = ref()

// 部门 const result = await FindDate()
const ListArray = ref<any>([
  { optionKey: 1, optionValue: '普通开补', optionLabel: '普通开补' },
  { optionKey: 2, optionValue: '鞋面全套', optionLabel: '鞋面全套' },
  { optionKey: 3, optionValue: '成型全套', optionLabel: '成型全套' },

  { optionKey: 4, optionValue: '原材料开补', optionLabel: '原材料开补' }
])

const GainDeptNmaeMethids = async () => {
  let newArray = <any>[]
  const result = await GainDeptNmae()
  result.forEach((item: any) => {
    newArray.push(item.deptName)
  })
  formList.value[4].selectOptions = EvaluatesTheArrayReturnValue(newArray)
  formList.value[5].selectOptions = ListArray.value
}

const EvaluatesTheArrayReturnValue = (ArrayList: any) => {
  return ArrayList.map((item: any, index: any) => {
    return {
      optionKey: index,
      optionValue: item,
      optionLabel: item
    }
  })
}

onMounted(() => {
  GainDeptNmaeMethids()

  ReplenishmentInformationInquiryMethods()
})

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入补料单号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入客户',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '补料部门'
  },
  {
    type: 'select',
    selectValue: '',
    selectLabel: '',
    selectOptions: [],
    selectP: '补料类型'
  },
  {
    type: 'date',
    dateLabel: '预料日期',
    dateValue: ''
  },
  {
    type: 'date',
    dateLabel: '完成日期',
    dateValue: ''
  },
  {
    type: 'radio1',
    checkboxLabel: '未完成',
    checked: false,
    label: '1'
  },
  {
    type: 'radio1',
    checkboxLabel: '已完成',
    checked: false,
    label: '2'
  },
  {
    type: 'radio1',
    checkboxLabel: '全部',
    checked: false,
    label: '0'
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '删除'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const handleSizeChange5 = (val: number) => {
  ReplenishmentInformationInquiryParms.value.pageSize = val
  ReplenishmentInformationInquiryMethods()
}

const handleCurrentChange5 = (val: number) => {
  ReplenishmentInformationInquiryParms.value.pageNum = val
  ReplenishmentInformationInquiryMethods()
}

const findData = async (data: string) => {
  switch (data) {
    case '置空': {
      formList.value.forEach((item) => {
        if (item.type === 'input') {
          item.inputValue = ''
        }
        if (item.type === 'select') {
          item.selectValue = ''
        }
        if (item.type === 'date') {
          item.dateValue = ''
        }
      })
      break
    }
    case '导出': {
      const res = await fileRequest.put<any, any>(`/bioDeptWrok/getSupTraceExprod`, ReplenishmentInformationInquiryParms.value)
      const link = document.createElement('a') // 利用a标签自定义下载文件名
      let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
      link.style.display = 'none'
      //设置连接
      link.href = window.URL.createObjectURL(blob)
      link.download = `补单追踪${Date.now()}.xls` //自定义文件名字
      document.body.appendChild(link)
      //模拟点击事件
      link.click()
      document.body.removeChild(link)

      break
    }
    case '删除': {
      handleCloseMateriaLKlc5()
      break
    }
  }
}

// 表格数据

const tableHeader = ref([
  {
    label: '客户',
    prop: 'custom',
    change: true
  },
  {
    label: '补料单号',
    prop: 'slipNo',
    change: true
  },
  {
    label: '补料日期',
    prop: 'slipDate',
    change: true
  },
  {
    label: '补料部门',
    prop: 'dutyDeptNo',
    change: true
  },
  {
    label: '指令',
    prop: 'lotNo',
    change: true
  },
  {
    label: '型体',
    prop: 'style',
    change: true
  },
  {
    label: '交期',
    prop: 'deliveryDate',
    change: true
  },
  {
    label: '订单数',
    prop: 'ordQty',
    change: true
  },
  {
    label: '开补数量',
    prop: 'suppQty',
    change: true
  },
  {
    label: '补料类型',
    prop: 'blFlag'
  },
  {
    Multistage: true,
    label: '原材料',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'type1NeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate1'
      }
    ]
  },
  {
    Multistage: true,
    label: '冲裁',
    children: [
      {
        label: '需要',
        prop: 'type2NeedFlag',
        type: 'checkbox'
      },
      {
        label: '完成日期',
        prop: 'finishDate2'
      }
    ]
  },
  {
    Multistage: true,
    label: '外协工艺',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'type3NeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate3'
      }
    ]
  },
  {
    Multistage: true,
    label: '配套',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'type4NeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate4'
      }
    ]
  },
  {
    Multistage: true,
    label: '针车',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'type5NeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate5'
      }
    ]
  },
  {
    Multistage: true,
    label: '大底',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'type6NeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate6'
      }
    ]
  },
  {
    Multistage: true,
    label: '成型',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'type7NeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate7'
      }
    ]
  },
  {
    Multistage: true,
    label: '完成状况',
    children: [
      {
        label: '需要',
        type: 'checkbox',
        prop: 'typeNeedFlag'
      },
      {
        label: '完成日期',
        prop: 'finishDate'
      }
    ]
  }
])
</script>

<style lang="less" scoped>
:deep(.ProductionDynamicMainCardBottom .el-input__wrapper) {
  background-color: #fff5eb;
}

.save {
  color: black;
  border: 1px solid #e7e7e7;
  background: #e7e7e7;
}
</style>
